<script setup>
    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })


    let data = [
        { name: '小区数量', count: 2, unit: '个' },
        { name: '人口数量', count: 2.76, unit: '万人' },
        { name: '房屋数量', count: 2.98, unit: '万间' },
        { name: '事件数量', count: 25, unit: '件' },
        { name: '设备数量', count: 322, unit: '个' },
    ]

</script>

<template>
    <div class="home-center-statistics-wrap flex">
        <div
            v-for="(item, index) in list"
            :key="index"
            class="item"
        >
            <div>
                <div class="count"><span>{{ item.numb }}</span>{{ data[index].unit }}</div>
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .home-center-statistics-wrap{
        .item{
            width: 153px;
            height: 68px;
            display: flex;
            align-items: center;
            margin-right: 20px;
            padding-left: 27px;
            color: #fff;
            background: url('../../../assets/images/statistics-1.png') center no-repeat;

            &:nth-child(2){
                background: url('../../../assets/images/statistics-2.png') center no-repeat;
            }
            &:nth-child(3){
                background: url('../../../assets/images/statistics-3.png') center no-repeat;
            }
            &:nth-child(4){
                background: url('../../../assets/images/statistics-4.png') center no-repeat;
            }
            &:nth-child(5){
                background: url('../../../assets/images/statistics-5.png') center no-repeat;
            }

            .count{
                font-size: 14px;

                span{
                    font-size: 24px;
                    margin-right: 5px;
                    font-family: 'hylilianghei';
                }
            }

            p{
                font-size: 16px;
                font-weight: bold;
                margin-top: 10px;
            }
        }
    }
</style>